<template>
  <el-container>
    <el-header></el-header>
    <el-main style="height: auto;">
      <el-card class="personalCenter" style="width: 600px; height: auto; margin: 5vh auto; padding-top:20px">
        <el-form :model="form" ref="form">
          <el-row>
            <el-col :xl="{ span: 20, push: 2 }">
              <el-form-item label="用户名" label-width="110px" prop="loginname">
                <el-input size="small" style="width: 90%;" v-model="form.loginname" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xl="{ span: 20, push: 2 }">
              <el-form-item label="姓名" label-width="110px" prop="employeeName">
                <el-input size="small" style="width: 90%;" v-model="form.employeeName" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xl="{ span: 20, push: 2 }" v-if="form.dictIsDAILIAdmin==='C_YES'">
              <el-form-item label="支付宝账号" label-width="110px" prop="alipayLoginName">
                <el-input size="small" style="width: 90%;" v-model="form.alipayLoginName" ></el-input>
              </el-form-item>
            </el-col>
            <el-col :xl="{ span: 20, push: 2 }" v-if="form.dictIsDAILIAdmin==='C_YES'">
              <el-form-item label="支付宝用户名" label-width="110px" prop="alipayName">
                <el-input size="small" style="width: 90%;" v-model="form.alipayName" ></el-input>
              </el-form-item>
            </el-col>
            <el-col :xl="{ span: 20, push: 2 }">
              <el-form-item label="联系电话" label-width="110px" prop="employeeMobile">
                <el-input size="small" style="width: 90%;" v-model="form.employeeMobile"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xl="{ span: 20, push: 2 }">
              <el-form-item label="邮箱地址" label-width="110px" prop="employeeEmail">
                <el-input size="small" style="width: 90%;" v-model="form.employeeEmail"></el-input>
              </el-form-item>
            </el-col>

            <el-col :xl="{ span: 20, push: 2 }">
              <el-form-item label-width="90px">
                <el-button size="small" @click="cancel">取消</el-button>
                <el-button size="small" type="primary" @click="saveEmployee('form')" v-preventReClick icon="el-icon-s-promotion"
                           :disabled="this.form.id == ''">保存
                </el-button>
                <el-button size="small" @click="showLoginView(true)" icon="el-icon-key" type="warning">修改密码</el-button>
                <el-button size="small" @click="openWarningDialog" icon="el-icon-bell" type="danger" v-if="roleChar.indexOf('DAILI')>-1">余额预警</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <!--账户查看-->
      </el-card>
    </el-main>
    <el-dialog class="loginView" title="修改密码" top="20vh" :visible.sync="operation.loginView" :append-to-body="true"
               :width="$store.state.app.screenWidth<600?'100%':'500px'">
      <el-form ref="passwordForm"  :model="passwordForm" label-width="90px" :rules="rules">
        <el-form-item label="旧密码" prop="oldPassWord">
          <el-input v-model="passwordForm.oldPassWord" show-password ></el-input>
        </el-form-item>
        <el-form-item label="新密码"  prop="newPassWord">
          <el-input v-model="passwordForm.newPassWord" show-password></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="commitPassWord">
          <el-input v-model="passwordForm.commitPassWord" show-password ></el-input>
        </el-form-item>
      </el-form>
      <span class="dialog-footer" slot="footer">
      <el-button @click="showLoginView(false)" size="small">关 闭</el-button>
      <el-button @click="changePassWord" type="primary" size="small">确 认</el-button>
        <!--填写充值金额--></span>
    </el-dialog>


    <el-dialog class="loginView" title="填写充值金额" top="20vh" :visible.sync="operation.rechargeView" :append-to-body="true"
               width="30%">
      <el-form ref="form" :model="form" label-width="90px">
        <el-form-item label="充值金额">
          <el-input v-model="amount" size="small"></el-input>
        </el-form-item>
        <el-form-item label="付款二维码" v-show="qrurl != ''"><img class="qrCode" :src="qrurl"></el-form-item>
      </el-form>
      <span class="dialog-footer" slot="footer">
      <el-button @click="showRechargeAmountView(false)" size="small">关 闭</el-button>
      <el-button @click="rechargeAmount" type="primary" size="small">确 认</el-button></span>
    </el-dialog>
    <!--设置余额预警-->
    <el-dialog title="充值余额预警通知" top="30vh" :visible.sync="showWarningDialog" width="500px" center>
      <div class="line">
        <el-form :model="warningform" ref="warningform">
          <el-form-item prop="balanceWarning" :rules="[{ pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: '请输入合法价钱数字', trigger: 'blur' }]">
            <span>账户余额低于</span><el-input v-model="warningform.criticalValue" placeholder="请输入预警金额" style="width: 130px;margin: 0 10px" ref="balanceWarning"></el-input><span>元时，发送短信到：{{form.employeePhone}}</span>
          </el-form-item>
        </el-form>
      </div>
      <div><span style="color: #999;font-size: 14px;">提示：您可以在用户中心修改您的手机号。</span></div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showWarningDialog = false" size="small">关 闭</el-button>
        <el-button @click="saveBalanceWarning" type="primary" size="small">确 认</el-button>
      </span>
    </el-dialog>
  </el-container>
</template>

<script>
  import {crmInitEmployee, crmUpdateEmployee, changePassWordPersonal, rechargeAmount, getBalanceWarning, setBalanceWarning} from '@/api/getData'

  export default {
    name: 'personalCenter',
    data() {
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.passwordForm.newPassWord) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };

      return {
        form: {
          loginname: '',
          employeeName: '',
          employeeMobile: '',
          employeePhone: '',
          employeeEmail: '',
          id: '',
          loginId: '',
          alipayName: '',
          alipayLoginName: '',
          dictIsDAILIAdmin: '',

          userId: '',
        },
        passwordForm:{
          oldPassWord: '',
          newPassWord: '',
          commitPassWord: ''
        },
        warningform:{
          criticalValue: 0,
        },
        operation: {
          loginView: false,
          rechargeView: false,
        },

        amount: '',
        qrurl: '',
        pagekey: '',
        showWarningDialog: false,
        roleChar: '',
        rules: {
          oldPassWord: [
            { required: true, message: '请输入老密码', trigger: 'change' }
          ],
          newPassWord: [
            { required: true, message: '请输入新密码', trigger: 'change' },
            { pattern: /^(?!([a-zA-Z]+|\d+)$)[a-zA-Z\d]{6,20}$/, message: '请输入6-20位数字加字母！' }
          ],
          commitPassWord: [
            { validator: validatePass2, trigger: 'blur' }
          ]
        }
      }
    },
    async created() {
      this.pagekey = await this.$getPageKey();
      this.roleChar = localStorage.getItem('roleChar')
      this.initEmployee();
    },

    methods: {
      async openWarningDialog(){
        this.pagekey = await this.$getPageKey();
        this.showWarningDialog = true;
        //查询用户当前设置的余额预警值
        getBalanceWarning({}).then(res=>{
          this.warningform.criticalValue = res.data.criticalValue
        })
      },
      closeWarningDialog(){
        this.showWarningDialog = false;
      },
      saveBalanceWarning(){
        let reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
        if(!reg.test(this.warningform.criticalValue)){
          this.$message.error('请修改您输入的金额');
          this.$refs.balanceWarning.focus()
          return false;
        }
        this.$confirm(`确定将余额预警值设置为 ${this.warningform.criticalValue} 元吗?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          let returnData = await setBalanceWarning({
            criticalValue: this.warningform.criticalValue,
            pagekey:this.pagekey
          })
          this.pagekey = await this.$getPageKey();
          if(returnData._result){
            if(returnData.code==10000){
              this.$message({
                type:'success',
                message: '账户余额预警值设置成功！'
              })
              this.showWarningDialog = false;
            }
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          });
        });

      },
      async initEmployee() {
        const returnData = await crmInitEmployee({})
        if (returnData._result) {
          if (returnData.data != null) {
            this.form.id = returnData.data.id
            this.form.userId = returnData.data.userId
            this.form.loginname = returnData.data.login.loginname
            this.form.employeeName = returnData.data.employeeName
            this.form.employeeMobile = returnData.data.employeeMobile
            this.form.employeePhone = returnData.data.employeeMobile
            this.form.employeeEmail = returnData.data.employeeEmail
            this.form.loginId = returnData.data.loginId
            this.form.alipayName = returnData.data.alipayName
            this.form.alipayLoginName = returnData.data.alipayLoginName
            this.form.dictIsDAILIAdmin = returnData.data.dictIsDAILIAdmin
          }
        }
      },
      cancel() {
        this.$router.back(-1)
      },
      async saveEmployee() {
        this.$refs['form'].validate(async (valid) => {
          if (valid) {
            // if(this.form.dictIsDAILIAdmin!=='C_YES'){
            //   this.form.dictIsDAILIAdmin = '';
            // }
            let s = await crmUpdateEmployee(this.form,{pagekey: this.pagekey})
            if (s._result) {
              this.$message.success("操作成功");
              this.initEmployee();
            }
            this.pagekey = await this.$getPageKey();
          } else {
            //console.log('error submit!!');
            return false;
          }
        });
      },
      async showLoginView(boolean) {
        this.operation.loginView = boolean
      },
      showRechargeAmountView(boolean) {
        this.amount = ''
        this.qrurl = ''
        this.operation.rechargeView = boolean
      },
      async changePassWord() {
        this.$refs['passwordForm'].validate(async (valid) => {
          if (valid) {
            const returnData = await changePassWordPersonal({
              id: this.form.loginId,
              oldPassWord: this.passwordForm.oldPassWord,
              newPassWord: this.passwordForm.newPassWord,
              commitPassWord: this.passwordForm.commitPassWord
            })
            if (returnData._result) {
              this.$message.success("操作成功");
              this.operation.loginView = false
            }
            return true;
          } else {
            console.log('error submit!!');
            return false;
          }

        });


      },
      async rechargeAmount() {
        this.dialogVisible = false
        const returnData = await rechargeAmount({
          amount: this.amount
        })
        if (returnData._result) {
          this.qrurl = returnData.data.imgBase64;
        }
      },
    }
  }
</script>

<style scoped lang="scss">
  .el-container {
    .el-header {
      margin-top: 5vh;
    }
  }

  .box-card {
    width: 666px;
    margin: 70px auto;
  }

  .file_upload_box {
    display: inline-block;
    width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;
  }

  .file_upload_box input[type=file] {
    position: absolute;
    left: 0;
    top: 6px;
    width: 100%;
    line-height: 25px;
    opacity: 0;
    cursor: pointer;
  }

  .file_upload_box a {
    display: inline-block;
    width: 100%;
    line-height: 25px;
    text-align: center;
    font-family: "Microsoft yahei";
    background-color: #315baf;
    color: #FFF;
    font-weight: 700;
    text-decoration: none;
  }

  .file_upload_box /deep/ a {
    cursor: default;
  }

  .excel {
    cursor: default;
    display: inline-block;
    width: 50%;
    height: 25px;
    line-height: 0px;
    text-align: center;
    font-family: "Microsoft yahei";
    background-color: #315baf;
    color: #FFF;
    font-weight: 700;
    text-decoration: none;
  }

  .active {
    background: white;
    color: black;
    width: 100%;
    border: none;
    padding: 0;
  }

  .el-main /deep/ .el-form-item__content {
    margin-bottom: 22px;
  }

  .isl {
    width: 80px;
  }
  .line{
    width: 100%;
    height: auto;
    position: relative;
    top: 0;
    left: 0;
    //line-height: 40px;
    text-align: left;
    color: #1a1a1a;

  }
</style>
